<template>
<div class="product-list">
    <div class="product-item" v-for="(product,index) of productList" :key="index">
        <el-descriptions class="margin-top" :column="2" border>
            <template slot="title">
                <span>{{product.category.title}}</span>
            </template>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    创建人
                </template>
                {{product.creator.realname}}
                <el-tag type="danger" v-if="product.creator.status==0">已离职</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-time"></i>
                    创建时间
                </template>
                {{product.create_time}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-dish"></i>
                    餐标
                </template>
                {{product.table_price_1}}万 - {{product.table_price_2}}万
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-wallet"></i>
                    
                </template>
                {{product.table_amount}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-date"></i>
                    预产期
                </template>
                {{product.event_date}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    城市
                </template>
                <el-tag type="danger" size="small">{{product.city.shortname}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    区域
                </template>
                <el-tag v-for="(item,index) of product.zone" :key="index" size="small" style="margin-right:5px">{{item.shortname}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
                <template slot="label">
                    <i class="el-icon-school"></i>
                    意向酒店
                </template>
                <el-tag v-for="(item,index) of product.store" :key="index" size="small" style="margin-right:5px">{{item.title}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-chat-square"></i>
                    备注
                </template>
                {{product.remark}}
            </el-descriptions-item>
        </el-descriptions>
    </div>
</div>
</template>

<script>
export default {
    props: {
        productList: {
            type: Array,
            default: []
        }
    },
    data() {
        return {

        }
    },
    computed: {

    },
    methods: {
        removeProduct(index) {
            this.$confirm('确认删除当前意向产品', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.productList.splice(index, 1);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.product-item {
    margin-top: 10px;

    ::v-deep .el-descriptions__header {

        margin-bottom: 10px;
    }
}
</style>
